import React, { useState } from 'react'
import {NavBar,Swiper}from 'antd-mobile'
import style from './index.module.css'
import {useNavigate} from 'react-router-dom'
const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
function Home() {
  const navigate=useNavigate()
  const [data,setData]=useState([
    {
      id:1,
      name:'酒店'
    },
    {
      id:2,
      name:'机票'
    },
    {
      id:3,
      name:'火车票'
    },
    {
      id:4,
      name:'旅游'
    },
    {
      id:5,
      name:'攻略/景点'
    },
    {
      id:11,
      name:'酒店'
    },
    {
      id:12,
      name:'机票'
    },
    {
      id:13,
      name:'车票'
    },
    {
      id:14,
      name:'旅游'
    },
    {
      id:15,
      name:'攻略/景点'
    }
  ])

  // 3、点击首页菜单的“火车票”跳转到火车票首页
  const goTrain=(id)=>{
    if(id==3){
      navigate('/hot')
    }
  }
  return (
    <div className={style.home}>
       <NavBar backIcon={false}>首页</NavBar>
       {/* 3、首页实现菜单滑动及幻灯片播放功能 */}
      <div className={style.content}>
     <div className={style.listbox}>
     {
        data.map(item=>{
          return <div key={item.id} onClick={()=>goTrain(item.id)}>{item.name}</div>
        })
      }
     </div>
      </div>
      <Swiper autoplay>
  {
    colors.map((color, index) => (
      <Swiper.Item key={index}>
        <div
          className={style.content1}
          style={{ background: color }}
        >
          {index + 1}
        </div>
      </Swiper.Item>
    ))
  }
      </Swiper>
    </div>
  )
}

export default Home
